<template>

    <el-table
            :data="tableData"
            border
            style="width: 800px">
        <el-table-column
                fixed
                prop="bookid"
                label="编号"
                width="150">
        </el-table-column>
        <el-table-column
                fixed
                prop="bookid"
                label="编号"
                width="150">
        </el-table-column>
        <el-table-column
                prop="name"
                label="书名"
                width="150">
        </el-table-column>
        <el-table-column
                prop="price"
                label="价格"
                width="250">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="200">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit( scope.row)">编辑
                </el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.row)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
    export default {
        name: "index01",
        created() {
            let _this = this;//由于回调函数 我们不能直接写我们的data对象
            axios.get('http://localhost:8082/temp/list').then(function (resp) {
                console.log(resp.data)
                //然后我们只需要将·我们的这个拿到的数据复制给我们的tabledata
                //解决了跨域问题
                _this.tableData = resp.data;
            })
        },
        methods: {
            handleClick(row) {
                let _this = this;
                console.log(row);
            }, handleDelete(row) {//这个row其实就是将我们的整个代码就可以进行传入

                this.$confirm('此操作将永久删除' + row.name + ', 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete('http://localhost:8082/temp/delete/' + row.bookid).then(function (resp) {
                        if (resp.data) {
                            _this.$alert('《' + row.name + '》', '提示', {
                                confirmButtonText: '确定',
                                callback: action => {
                                    location.reload();
                                    //我们的数据要是加载成功的话 我们就直接重新加载一下我们的页面就行
                                }
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleEdit(row) {
                this.$router.push('/update?id=' + row.bookid)
            },
        },
        data() {
            return {
                tableData: ''
            }
        }
    }
</script>

<style scoped>

</style>